<template>
  <div id="regBox">
    <div id="regBoxTop">
      <h2>账号注册</h2>
      <input type="text" placeholder="邮箱" v-model="id" class="regipt" />
      <span class="tips" v-show="show.noId">邮箱不能为空</span>
      <span class="tips" v-show="show.hadId">邮箱以被注册</span>
      <span class="tips" v-show="show.errorId">邮箱格式错误</span>
      <div>
        <input type="text" placeholder="验证码" v-model="vcode" />
        <span ref="svg" class="svg" @click="changeSvg"></span>
      </div>
      <span class="tips" v-show="show.noVcode">验证码不能为空</span>
      <span class="tips" v-show="show.errorVcode">验证码输入错误</span>
      <input
        type="password"
        placeholder="密码(8-20位字符)"
        class="regipt"
        v-model="pwd"
      />
      <span class="tips" v-show="show.noPwd">密码不能为空</span>
      <span class="tips" v-show="show.errorPwd">密码格式不正确</span>
      <input type="password" placeholder="确认密码" class="regipt" v-model="pwd2"/>
      <span class="tips" v-show="show.inconformityPwd">两次输入密码不一致</span>
      <span id="haveId" @click="changeLogin">已有账号,立即登录</span>
      <div id="ageermentBox">
        <label for="agreement" :class="{ chosed: sign }" @click="changeSign"
          ><input type="checkbox" id="agreement"
        /></label>
        <h3>同意《MCAKE购物协议》</h3>
      </div>
      <span class="noAgreement" v-show='show.noAgreement'>协议未同意</span>
    </div>
    <div id="regBoxFoot">
      <span id="cancelreg" @click="changeLogin">取消注册</span>
      <span id="completereg" @click="completeReg">注册完成</span>
    </div>
    <span id="doReg" v-show="show.doReg">注册成功</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sign: false,
      id: "",
      vcode: "",
      pwd: "",
      pwd2: "",
      show:{
        noId:false,
        hadId:false,
        errorId:false,
        noVcode:false,
        errorVcode:false,
        noPwd:false,
        errorPwd:false,
        inconformityPwd:false,
        noAgreement:false,
        doReg:false
      }
    };
  },
  methods: {
    //点击取消注册，返回登录页面
    changeLogin() {
      this.$store.commit("changeLoginName", "login");
    },
    //点击
    changeSign() {
      this.sign = !this.sign;
    },
    //前端验证
    async completeReg() {
      if (this.id == "") {
        this.show.noId = true
      } else if (this.vcode == "") {
        this.show.noVcode=true
      } else if (this.pwd == "") {
        this.show.noPwd = true
      } else if (!/^([\w\.\-]+)\@(\w+)(\.([\w^\_]+)){1,2}$/.test(this.id)) {
        this.show.errorId = true
      } else if (this.pwd.length < 8 || this.pwd.length > 20) {
        this.show.errorPwd = true
      } else if (this.pwd != this.pwd2) {
        this.show.inconformityPwd = true
      } else if(!this.sign){
          this.show.noAgreement = true
          setTimeout(()=>{
            this.show.noAgreement = false
          },1000)
      }else{
          let req = await this.axios.post("/lqc/register",{
            email:this.id,
            vcode:this.vcode,
            pwd:this.pwd
          })
          if(req.data.code == 2001){
            this.show.doReg = true
            setTimeout(()=>{
              this.show.doReg = false
              this.$store.commit("changeLoginName","login")
            },1000)
          }else if(req.data.code == 4001){  
            this.show.errorVcode = true
            this.changeSvg()
          }else if(req.data.code == 4002){
            this.show.hadId = true
          }
      }
    },
    //点击切换验证码
    async changeSvg(){
      let req = await this.axios.get("/lqc/verfy")
      // console.log(req.data)
      this.$refs.svg.innerHTML = req.data
    }
  },
  //页面一加载就获取验证码
 async mounted(){
      let req = await this.axios.get("/lqc/verfy")
      // console.log(req.data)
      this.$refs.svg.innerHTML = req.data
  }
};
</script>
<style scoped lang="scss">
#regBox {
  position: absolute;
  top: 0;
  right: 0;
}
#regBoxTop {
  width: 380px;
  background-color: #fff;
  padding: 0 30px;
  box-sizing: border-box;
  padding-top: 20px;
  div {
    margin-top: 20px;
  }
  input {
    height: 40px;
    border: none;
    outline: none;
    border-bottom: 1px solid rgb(232, 232, 232);
  }
  label {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid rgb(255, 227, 42);
  }
  h3 {
    vertical-align: top;
    display: inline-block;
    margin-left: 10px;
  }
}
.chosed {
  background-color: rgb(255, 227, 42);
}
.regipt {
  margin-top: 20px;
  display: block;
  width: 100%;
}
#haveId {
  font-size: 14px;
  font-weight: 500;
  margin-left: 200px;
  margin-top: 20px;
  &:hover {
    font-weight: 700;
    cursor: pointer;
  }
}
#agreement {
  opacity: 0;
}
#regBoxFoot {
  display: flex;
  width: 380px;
  span {
    flex: 1;
    text-align: center;
    height: 70px;
    line-height: 70px;
    font-size: 14px;
    cursor: pointer;
  }
}
#cancelreg {
  color: #fff;
  background-color: rgb(51, 51, 51);
}
#completereg {
  color: black;
  background-color: rgb(255, 227, 42);
  font-weight: 600;
}
#ageermentBox {
  text-align: center;
}
.tips {
  color: red;
}
.noAgreement,#doReg{
    position: fixed;
    height: 40px;
    width: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgb(0,0,0,0.7);
    text-align: center;
    line-height: 40px;
    color: white;
}
.svg{
  height: 40px;
  display: inline-block;
}
</style>